<template>
    <div id="templateContract">
        <el-row class="head">
            <el-col :span="24">
                <h1 class="contract_title">模板预览</h1>
            </el-col>
        </el-row>
        <div>
            <div class="nav">
                <div class="nav-item">
                <el-select v-model="defaultTemplate" value-key="templateId" @change="change_option" placeholder="请选择合同模板" filterable >
                    <el-option
                    v-for="item in templates"
                    :key="item.templateId"
                    :label="item.templateName"
                    :value="item"
                    ></el-option>
                </el-select>
                </div>
                <div class="nav-item">
                    <el-button @click="$router.push('/template')">编辑模板</el-button>
                </div>
                 <div class="nav-item">
                    <el-button v-print="'#conPrintXXX'">打印</el-button>
                </div>
            </div>
            <div class="body">
                <!-- <el-input autosize type="textarea" v-model="templates[0].templateContent"></el-input> -->
                <div id="conPrintXXX" class="content ql-editor" v-html="printContent"></div>
            </div>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.snow.css'
import {formatTimeToStr} from "../../assets/format"
export default {
    data(){
        return{
            templates:[],                   // 模板集合
            contract:{},                    // 合同对象
            defaultTemplate:{},             // 模板对象
            printContent:"",                // 解析后的模板内容
        }
    },
    methods:{
        change_option(){
            const con = this.contract
            // 总金额
            let totalMoney = this.defaultTemplate.templateContent.replace(/【总金额】/g, con.totalMoney)
            // 客户
            let customer = totalMoney.replace(/【客户】/g, con.customer.customerName)
            // 负责人
            let empSigner = customer.replace(/【负责人】/g, con.empSigner.empName)
            // 联系人
            let signTime = empSigner.replace(/【签约时间】/g, formatTimeToStr(con.signTime,"yyyy-MM-dd"))
            // 合同开始时间
            let startTime = signTime.replace(/【合同开始时间】/g, formatTimeToStr(con.startTime,"yyyy-MM-dd"))
            // 合同结束时间
            let overTime = startTime.replace(/【合同结束时间】/g, formatTimeToStr(con.overTime,"yyyy-MM-dd"))
            // 我方
            let our = overTime.replace(/【我方】/g, "罗小黑科技有限公司")
            // 产品
            this.printContent = our.replace(/【产品】/g,this.product())
            
        },
        product(){
            // 产品渲染
            let tableDom = '<table style="word-wrap: break-word; word-break: break-all;LINE-HEIGHT: 150%; WIDTH: 100%; BORDER-COLLAPSE: collapse; EMPTY-CELLS: show; FONT-SIZE: 14px"'
                          +'border="1"'
                          +'cellpadding="3"'
                          +'class="table-s00"'
                          +'width="100%"'
                          +'cellspacing="0">'
                +'<thead>'
                    +'<tr>'
                        +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">品名</span></th>'
                        +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">品牌</span></th>'
                        +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">规格</span></th>'
                        +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">数量</span></th>'
                        +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">单价</span></th>'
                         +'<th style="text-align: left" class="th-inner"><span style="font-family: 楷体">金额</span></th>'
                     +'</tr>'
                +'</thead>'
                +'<tbody>'
            this.contract.productList.forEach(pro => {
                let td = '<td class="text-left">'+ pro.proDetail.product.productName +'</td>'
                        +'<td class="text-left">'+ pro.proDetail.product.productBrand +'</td>'
                        +'<td class="text-left">'
                            +'<span >'
                                +pro.proDetail.abilities[0].attribute.attrName+':'+pro.proDetail.abilities[0].abilityName
                            +'</span>'
                        +'</td>'
                        +'<td class="text-left">'+pro.proCount +'</td>'
                        +'<td style="white-space: nowrap;" class="text-left">'
                            +'<span style="white-space:nowrap">'
                            +'<span style="font-size:9pt;font-weight:normal;">￥</span>'+pro.discount
                            +'</span>'
                        +'</td>'
                        +'<td style="white-space: nowrap;" class="text-left">'
                            +'<span style="white-space:nowrap">'
                            +'<span style="font-size:9pt;font-weight:normal;">￥</span>'+ pro.proCount*pro.discount
                            +'</span>'
                        +'</td>'
                let tr = '<tr>'+td+'</tr>'
                tableDom += tr
                
            });
            tableDom += '</tbody></table>'
            return tableDom
        },
        initData(){
           this.axios.get("api/dd/printTemplates")
            .then(res => {
                this.templates = res.data
                if(this.templates.length>0){
                    this.defaultTemplate = this.templates[0]
                    this.change_option(this.templates[0])
                }
            })
            .catch(err => {
                console.error(err); 
            })
        }
    },
    created(){
        this.contract = this.$store.state.contract
        this.initData()
    }

}
</script>

<style scoped>
.body{background-color: #F2F6FC;width: 100%-40px;margin: 0 20px;}
.content{padding: 10px;width: 670px;background-color: #ffffff;margin: 0 auto;}
/* 头部样式 */
#templateContract {
  background: #e4e7ee;
}
.head {
  height: 70px;
  background: #f8f6f8;
  line-height: 70px;
}
.contract_title {
  display: inline-block;
  font-weight: unset;
  margin-left: 20px;
}
.el-col span {
  color: #b4b4bc;
}
.nav {
  margin: 20px;
  background: #fcfbfd;
  width: 100%-40px;
  height: auto;
  min-height: 55px !important;
  line-height: 55px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.nav .nav-item {
  display: inline-block;
  height: 45px;
  padding: 0px 15px;
  line-height: 45px;
}
.el-button--text {
  color: #606266;
  font-size: 14px;
}
.el-dropdown-link {
  color: #606266 !important;
}
.text-right{text-align: right;}
.text-left{text-align: left;}
</style>